<template>
    <div class="detail" >

        <h1>物品名称：{{name}}</h1>
        

        <h1>物品价格：{{price}}</h1>

        <!-- <h2>{{i.num||0}}</h2> -->
        <h1>车内数量：{{number}}</h1>

     

        
        
        <div v-for="(i,index) in spList" :key="index" class="card">
            
            <div style="height: 30px;line-height: 30px;">
                
                
                
                <button @click="add(i)"><h1>加购物车</h1></button>
            </div>
        </div>
     
    </div>
</template>

<script>
    export default {
        name: 'shopDetail',
        data(){
            return {
            number: this.num
            // number:1
            }
        },

        props:{
            name:String,
            price:Number,
            num:Number
        },
        methods:{
            //carList
            add(val){
                this.$store.dispatch('payCar/add',val)
                this.number += 1
            },
            
            getParams(){
                console.log(this.$route.params.num+1)
                console.log('----------')

            }

        },

        computed:{
            spList(){
                let spList=this.$store.state.payCar.spList
                let carList=this.$store.state.payCar.carList

                for(let i = 0;i < spList.length;i++){
                    for(let j = 0;j < carList.length;j++){
                        if(carList[j].name === spList[i].name){
                            spList[i].num = carList[j].num
                        }
                    }
                }
                return spList
            },


        },

        mounted(){
            this.getParams()
        }
    }
</script>

<style>
    .detail{

    }


</style>
